<script setup lang="ts">
  import DisplayItem from '@/components/home/largeScreenDisplay/DisplayItem.vue';
  import { reactive } from 'vue';
  import { IDataShow } from '@/api/types';
  import DisplayPie from '@/components/home/largeScreenDisplay/DisplayPie.vue';
  import DisplayMultiLineBar from '@/components/home/largeScreenDisplay/DisplayMultiLineBar.vue';
  import DisplayBar from '@/components/home/largeScreenDisplay/DisplayBar.vue';

  let d = new Date();
  let xAxis = [] as string[];
  for (let i = 0; i < 7; i++) {
    let d1 = new Date(d.getFullYear(), d.getMonth(), d.getDate() - i);
    xAxis.push(`${d1.getMonth() + 1}月${d1.getDate()}日`);
  }
  xAxis.reverse();

  let xAxis1 = [] as string[];
  for (let i = 0; i < 20; i++) {
    let d1 = new Date(d.getFullYear(), d.getMonth(), d.getDate() - i);
    xAxis1.push(`${d1.getMonth() + 1}月${d1.getDate()}日`);
  }
  xAxis1.reverse();

  const showData = reactive<IDataShow[]>([
    {
      xAxis: [],
      disData: [
        { value: 10480, name: '男' },
        { value: 7350, name: '女' },
      ],
      disName: '男女比例图',
      type: 'pie',
    },
    {
      xAxis: [],
      disData: [
        { value: 2568, name: '0-10岁' },
        { value: 4576, name: '10-20岁' },
        { value: 1457, name: '20-30岁' },
        { value: 2453, name: '30-40岁' },
        { value: 2789, name: '40-50岁' },
        { value: 3567, name: '50-60岁' },
        { value: 3745, name: '60-70岁' },
      ],
      disName: '新型冠状病毒肺炎',
      type: 'pie',
    },
  ]);

  const showData1 = reactive<IDataShow[]>([
    {
      xAxis,
      disData: [26, 32, 22, 25, 27, 30, 24],
      disName: '支气管哮喘',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [17, 13, 18, 12, 12, 11, 11],
      disName: '急性肠胃炎',
      type: 'line',
    },
    {
      xAxis: [],
      disData: [9, 10, 10, 22, 13, 11, 12],
      disName: '肠胃型感冒',
      type: 'line',
    },
  ]);
  const showData2 = reactive<IDataShow>({
    xAxis: xAxis1,
    disData: [20, 28, 22, 27, 28, 26, 23, 33, 25, 27, 19, 29, 24, 32, 27, 38, 20, 22, 12, 32],
    disName: '普通感冒、风寒感冒',
    type: 'bar',
  });
</script>

<template>
  <DisplayItem>
    <DisplayPie class="h-[29vh]" :show-data="showData" />
    <DisplayMultiLineBar class="h-[29vh]" :show-data="showData1" />
    <DisplayBar class="h-[29vh]" :show-data="showData2" />
  </DisplayItem>
</template>

<style lang="scss"></style>
